<template>
    <section class="setting">
        <mt-header fixed title="设置">
            <mt-button slot="left" icon="back" @click="Returnclick"></mt-button>
        </mt-header>
        <div class="function-list">
            <div v-if="isApp && hasVersion" class="function-list-item" @click="$router.push({ name: 'about' })">
                关于蓝薪卡
                <i class="fa fa-angle-right"></i>
            </div>
        </div>
        <button class="logout" @click="loginOut">
            退出登录
        </button>
    </section>
</template>
<script>
import os from '~/assets/api/os'

export default {
    data() {
        return {
            isApp: false,
            hasVersion: true
        }
    },
    beforeRouteLeave(to, from, next) {
        this.$MessageBox.close(false)
        next()
    },
    created() {
        /* if (os.isAndroidLxkApp() || os.isIosLxkApp()) {
            this.isApp = true
            const ua = navigator.userAgent
            const uaSplit = ua.split('/')
            const ver = uaSplit[uaSplit.length - 2]

            if (!ver.test(/\d+\.\d+\.\d+/)) {
                this.hasVersion = false
            }
        } */
    },
    methods: {
        Returnclick() {
            //返回
            this.$router.go(-1)
        },
        loginOut() {
            // 退出登录
            MessageBox.confirm('退出登录').then(action => {
                // console.log(action)
                if (action == 'confirm') {
                    this.$router.push({ name: 'login' })
                    localStorage.clear()
                }
            })
            // if(os.isAndroidLxkApp()){
            //     console.log(111)
            // }else if(os.isIosLxkApp()){
            //     console.log(555)
            // }else {
            //     this.$router.push({name:'login'});
            //     localStorage.clear()
            // }
        }
    }
}
</script>
<style scoped lang="less">
.setting {
    .logout {
        width: 90%;
        height: 88px;
        position: fixed;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        border: none;
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffdf00',endColorStr='#ffcd00',gradientType='1');
        background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
        background: -o-linear-gradient(left, #ffdf00, #ffcd00);
        background: -webkit-gradient(
            linear,
            0% 0%,
            100% 0%,
            from(#ffdf00),
            to(#ffcd00)
        );
        outline: none;
        border-radius: 43.75px;
        font-size: 0.45rem;
    }
    .logout:active {
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ECC111',endColorStr='#E6C022',gradientType='1');
        background: -moz-linear-gradient(left, #ecc111, #e6c022);
        background: -o-linear-gradient(left, #ecc111, #e6c022);
        background: -webkit-gradient(
            linear,
            0% 0%,
            100% 0%,
            from(#ecc111),
            to(#e6c022)
        );
    }
}

.function-list {
    margin-top: 12.5px;

    .function-list-item {
        height: 120px;
        line-height: 120px;
        font-size: 30px;
        background: #fff;
        padding-left: 20px;

        span {
            float: left;
        }

        i {
            float: right;
            margin-right: 45px;
            font-size: 45px;
            color: #999;
            line-height: 120px;
        }
    }
}
</style>
<style>
*{

    font-size:0.45rem;
}
html,
body {
    background: #f8f8f9;
}
.mintui {
    font-size: 0.45rem !important;
}
.mint-header {
    height: 1.173333rem !important;
    font-size: 0.45rem !important;
    background: #fff !important;
    color: #2e2e2e !important;
    border-bottom: 0.016667rem solid #f8f8f8 !important;
}
.mint-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.426667rem;
    font-weight: 400;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.mint-header-button.is-right {
    text-align: right;
    margin-right: 0.3rem;
}
.mint-msgbox-title {
    font-size: 0.45rem !important;
}
.mint-msgbox-wrapper .mint-msgbox .mint-msgbox-content {
    padding: 0.3rem 0.2rem 0.4rem;
    font-size: 0.2rem;
}
.mint-msgbox-btns {
    height: 1.3rem !important;
    line-height: 1.3rem !important;
}
</style>
